<!--大屏管理-->
<div class="rightDiv">
  <div class="exciseTableDiv">
    <div style="overflow: hidden">
      <div class="tableTop fl-l">
        <button nz-button nzType="primary" (click)="clickAdd()"><i nz-icon nzType="plus" nzTheme="outline"></i>新增
        </button>
        <button nz-button nzType="default"
                nz-popconfirm
                nzOkType="danger"
                nzTitle="确定删除所选资料吗?"
                (nzOnCancel)="cancelFn()"
                (nzOnConfirm)="opreatAll(1)"
                [disabled]="canDelete"
                nzPlacement="top"
        >
          <i nz-icon nzType="delete" nzTheme="outline"></i>批量删除
        </button>
        <button nz-button nzType="default"
                nz-popconfirm
                nzOkType="danger"
                nzTitle="确定启用所选资料吗?"
                (nzOnCancel)="cancelFn()"
                (nzOnConfirm)="opreatAll(2)"
                [disabled]="canDelete"
                nzPlacement="top"
        >批量启用
        </button>
        <button nz-button nzType="default"
                nz-popconfirm
                nzOkType="danger"
                nzTitle="确定撤销所选资料吗?"
                (nzOnCancel)="cancelFn()"
                (nzOnConfirm)="opreatAll(3)"
                [disabled]="canDelete"
                nzPlacement="top"
        >批量撤销
        </button>
      </div>
      <div class="searchDiv fl-r">
        <label>
          <span>资料名称：</span>
          <input nz-input placeholder="请输入" [(ngModel)]="searchLabel"/>
        </label>
        <label>
          <span>资料状态：</span>
          <nz-select style="width: 160px" nzAllowClear [(ngModel)]="zlStatus" nzPlaceHolder="请选择">
            <nz-option *ngFor="let option of zlStatusList;" [nzValue]="option.value" [nzLabel]="option.text"></nz-option>
          </nz-select>
        </label>
        <label style="margin-right: 0">
          <button nz-button style="margin-right:10px" nzType="primary" (click)="clickSearch()">查询</button>
          <button nz-button nzType="default" (click)="resetSearch()">重置</button>
        </label>
      </div>
    </div>
    <div style="margin-top: 35px">
      <ng-template #totalTemplate let-total>总共 {{ pageInfo.totalRecords? pageInfo.totalRecords:0 }} 条</ng-template>
      <nz-table
        #exciseBankTable
        nzBordered
        [nzData]="allList"
        [nzFrontPagination]="false"
        [nzShowPagination]="true"
        [nzPageIndex]="pageInfo.first"
        [nzTotal]="pageInfo.totalRecords"
        [nzShowTotal]="totalTemplate"
        [nzPageSize]="pageInfo.rows"
        [nzLoadingDelay]="1"
        [nzPageSizeOptions]="[10,20,30,50,100]"
        [nzShowQuickJumper]="true"
        [nzShowSizeChanger]="true"
        (nzPageIndexChange)="searchPageIndex($event)"
        (nzPageSizeChange)="searchPageSize($event)"
        (nzCurrentPageDataChange)="currentPageDataChange($event)"
      >
        <thead>
        <tr>
          <th class="tableCheck"
              nzShowCheckbox
              [(nzChecked)]="isAllCheck"
              [nzIndeterminate]="isIndeterminate"
              (nzCheckedChange)="checkAll($event)"
          ></th>
          <th>资料名称</th>
          <th
            nzShowFilter
            [nzFilters]="allTypes"
            [nzFilterMultiple]="false"
            (nzFilterChange)="filterSome($event, 'category')"
          >展示板块
          </th>
          <th>资料类型</th>
          <th nzCustomFilter>
            上传人
            <nz-dropdown nzTrigger="click" nzPlacement="bottomRight" [nzClickHide]="false" nzTableFilter #dropdown>
              <i
                nz-icon
                nzType="search"
                class="ant-table-filter-icon"
                [class.ant-table-filter-open]="dropdown.nzVisible"
                nz-dropdown
              ></i>
              <div class="search-box w12">
                <input type="text" nz-input placeholder="请输入" #releaser/>
                <button nz-button nzSize="small" nzType="primary" (click)="titleSearch('releaser',releaser.value)"
                        class="search-button">
                  搜索
                </button>
                <button nz-button nzSize="small" (click)="resetFilter('releaser');releaser.value = ''">重置</button>
              </div>
            </nz-dropdown>
          </th>
          <th>上传时间</th>
          <th>展示顺序</th>
          <th>状态</th>
          <th style="width:180px;">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of exciseBankTable.data">
          <td
            nzShowCheckbox
            [(nzChecked)]="mapOfCheckedId[data.id]"
            (nzCheckedChange)="refreshStatus()"
          ></td>
          <td>{{ data.materialTitle ? data.materialTitle : '' }}</td>
          <td>{{ data.category ? data.category : ''}}</td>
          <td>{{ data.dataType == 1 ? '图片' : '视频'}}</td>
          <td>{{ data.releaser ? data.releaser : ''}}</td>
          <td>{{ data.gmtCreate | date :'yyyy-MM-dd HH:mm:ss'}}</td>
          <td>{{ data.sort }}</td>
          <td>
            <span *ngIf="data.status === 0"><nz-badge [nzColor]="'#FF8B53'" [nzText]="'未启用'"></nz-badge></span>
            <span *ngIf="data.status === 1"><nz-badge [nzColor]="'#00D886'" [nzText]="'启用'"></nz-badge></span>
          </td>
          <td>
            <span class="operaSuccess firOpera"
                  *ngIf="data.status == 0"
                  nz-popconfirm
                  nzOkType="danger"
                  nzTitle="确定启用吗?"
                  (nzOnConfirm)="openUse(data)"
                  nzPlacement="top"
            >启用</span>
            <span class="operaOrange firOpera"
                  *ngIf="data.status == 1"
                  nz-popconfirm
                  nzOkType="danger"
                  nzTitle="确定撤销吗?"
                  (nzOnConfirm)="closeUse(data)"
                  nzPlacement="top"
            >撤销</span>
            <span class="operaFont firOpera" (click)="lookUse(data)">查看</span>
            <span class="operaFont firOpera" (click)="editUse(data)" *ngIf="data.status == 0">编辑</span>
            <span class="operaTao"
                  *ngIf="data.status == 0"
                  nz-popconfirm
                  nzOkType="danger"
                  nzTitle="确定删除吗?"
                  (nzOnConfirm)="deleteOne(data.id)"
                  nzPlacement="top"
            >删除</span>
          </td>
        </tr>
        </tbody>
      </nz-table>
    </div>
  </div>
</div>

<!--新增弹框-->
<nz-modal
  class="modalStyle"
  [(nzVisible)]="showAddModal"
  [nzTitle]="modalTitle2"
  [nzContent]="modalContent2"
  [nzFooter]="modalFooter2"
  (nzOnCancel)="showAddModal = false"
  nzWidth="50%"
  [nzStyle]="{top:'15%'}"
  nzMaskClosable="false"
>
  <ng-template #modalTitle2>
    {{isAdd ? '新增': '编辑'}}资料
  </ng-template>

  <ng-template #modalContent2>
    <form nz-form [formGroup]="validateForm">
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired >资料名称</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input nz-input formControlName="materialTitle" [(ngModel)]="oneObj.materialTitle" placeholder="请输入资料名称"/>
          <nz-form-explain *ngIf="validateForm.get('materialTitle')?.dirty && validateForm.get('materialTitle')?.errors">
            资料名称不能为空！
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>展示板块</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <nz-select nzPlaceHolder="请选择" [(ngModel)]="oneObj.category" formControlName="category" (ngModelChange)="cateChange($event)" [nzDisabled]="!isAdd">
            <nz-option [nzValue]="'优秀学生风采'" [nzLabel]="'优秀学生风采'"></nz-option>
            <nz-option [nzValue]="'精品课程'" [nzLabel]="'精品课程'"></nz-option>
            <nz-option [nzValue]="'历年获奖'" [nzLabel]="'历年获奖'"></nz-option>
            <nz-option [nzValue]="'校外实训基地'" [nzLabel]="'校外实训基地'"></nz-option>
          </nz-select>
          <nz-form-explain *ngIf="validateForm.get('category')?.dirty && validateForm.get('category')?.errors">
            展示板块不能为空！
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>展示顺序</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <nz-input-number nz-input formControlName="sort" [(ngModel)]="oneObj.sort" [nzMin]="1" [nzMax]="999" [nzStep]="1" style="width: 100%"></nz-input-number>
          <nz-form-explain *ngIf="validateForm.get('sort')?.dirty && validateForm.get('sort')?.errors">
            展示顺序不能为空！
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>上传文件</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <div class="clearfix">
            <nz-upload [nzAction]="uploadUrl"
                       [nzHeaders]="headerInfo"
                       [nzData]="{'moduleName': 'bigscreen'}"
                       [(nzFileList)]="fileList"
                       [nzShowButton]="fileList.length < 1"
                       [nzRemove]="deleteFlile"
                       [nzBeforeUpload]="beforeUpload"
                       (nzChange)="getUploadInfo($event)"
                       [nzAccept]="'.jpg,.png,.mp4'"
            >
              <button nz-button>
                <i nz-icon type="upload"></i><span>上传</span>
              </button>
            </nz-upload>
            <div>
              <p class="font-hui">1.优秀学生风采图片推荐尺寸：380*504，格式png、jpg，大小350 KB以内;</p>
              <p class="font-hui">2.历年获奖图片推荐尺寸：1920*1440，格式png、jpg，大小1 MB以内;</p>
              <p class="font-hui">3.精品课程视频推荐宽高比约为1.8，格式mp4，大小500 MB以内;</p>
            </div>
          </div>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item [hidden]="oneObj.category != '校外实训基地'">
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>地址</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input nz-input formControlName="addr" [(ngModel)]="oneObj.addr" placeholder="请输入校外实训基地地址"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item [hidden]="oneObj.category != '优秀学生风采' && oneObj.category != '校外实训基地'">
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>资料描述</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <textarea nz-input formControlName="materialDes" placeholder="请输入资料描述" [(ngModel)]="oneObj.materialDes" rows="3"></textarea>
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-template>

  <ng-template #modalFooter2>
    <button nz-button nzType="default" (click)="showAddModal = false">取消</button>
    <button nz-button nzType="primary" [disabled]="validateForm.invalid && fileList.length <= 0" (click)="handleOk()">保存</button>
  </ng-template>
</nz-modal>

<!--查看弹框-->
<nz-modal
  class="modalStyle"
  [(nzVisible)]="showLokkModal"
  [nzTitle]="modalTitle3"
  [nzContent]="modalContent3"
  [nzFooter]="modalFooter3"
  (nzOnCancel)="showLokkModal = false"
  nzWidth="50%"
  [nzStyle]="{top:'15%'}"
  nzMaskClosable="false"
>
  <ng-template #modalTitle3>
    查看资料
  </ng-template>

  <ng-template #modalContent3>
    <form nz-form>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" >资料名称</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <span>{{lookObj.materialTitle}}</span>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24">展示板块</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <span>{{lookObj.category}}</span>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24">展示顺序</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <span>{{lookObj.sort}}</span>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24">资料类型</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <span>{{lookObj.dataType == 1?'图片':'视频'}}</span>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24">上传文件</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <div style="width: 150px;margin-top: 15px;cursor: pointer" (click)="openUrl()" *ngIf="lookObj.dataType == 1" title="点击查看大图">
            <img src="{{linkInfo + 'source/view/' + lookObj.materialVO?.moduleName + '/' + lookObj.materialVO?.fileNewName}}" alt="图片">
          </div>
          <div style="cursor: pointer" (click)="openUrl()" *ngIf="lookObj.dataType == 2">
            <img src="assets/img/video.png" alt="图片" style="width: 100px">
            <p class="font-hui">视频资料请点击查看或者下载</p>
          </div>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item [hidden]="lookObj.category != '校外实训基地'">
        <nz-form-label [nzSm]="6" [nzXs]="24">地址</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <span>{{lookObj.addr}}</span>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item [hidden]="lookObj.category != '优秀学生风采' && lookObj.category != '校外实训基地'">
        <nz-form-label [nzSm]="6" [nzXs]="24">资料描述</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <span>{{lookObj.materialDes}}</span>
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-template>

  <ng-template #modalFooter3>
    <button nz-button nzType="default" (click)="showLokkModal = false">关闭</button>
  </ng-template>
</nz-modal>

